<template>
  <div class="box">
    <div class="top">
      <div class="top_item">
        <countTo
        class="font_number"
        :startVal="0"
        :endVal="getxiaoShouE"
        :duration="3000"
        ></countTo>
        <p>销售额</p>
      </div>
      <div class="top_item">
        <countTo
        class="font_number"
        :startVal="0"
        :endVal="getqBuAnZang"
        :duration="3000"
        ></countTo>
        <p>已全部安葬</p>
      </div>
      <div class="top_item">
        <countTo
        class="font_number"
        :startVal="0"
        :endVal="getbFenAnFang"
        :duration="3000"
        ></countTo>
        <p>已部分安葬</p>
      </div>
      <div class="top_item">
        <countTo
        class="font_number"
        :startVal="0"
        :endVal="getyShouWeiAnZang"
        :duration="3000"
        ></countTo>
        <p>已销售未安葬</p>
      </div>
      <div class="top_item">
        <countTo
        class="font_number"
        :startVal="0"
        :endVal="getweiShou"
        :duration="3000"
        ></countTo>
        <p>未销售</p>
      </div>
    </div>
    <div class="mapChart" ref="mapChart"></div>
  </div>
</template>

<script>
import * as Api from "@/api/home";
import countTo from "vue-count-to";
import huohua from "@/assets/imgs/huohua.png";
export default {
  name: "homeCenterTop",
  components: {
    countTo,
  },
  data() {
    return {
      huohua,
      getmWZongLiang: 0,
      getxiaoShouE: 0,
      getqBuAnZang: 0,
      getbFenAnFang: 0,
      getyShouWeiAnZang: 0,
      getweiShou: 0,
      chart: null,
      color:["#2FC0FF","#EAAB00","#3B80FF","#FF9C5D"],
    };
  },
  mounted() {
    // 初始化
    this.initChart();
    this.getData()
    window.addEventListener("resize", this.screenAdapter);
  },
  methods: {
    async getData(){
            let {data} = await this.$axios({
              method:'post',
              url:`${this.baseUrl}?action=GetZongLan`
            })
            if(data._issuccess!==1) return this.$message.error(data._msg)
            let {getmWZongLiang,getxiaoShouE,getqBuAnZang,getbFenAnFang,getyShouWeiAnZang,getweiShou}=data._data
            this.getmWZongLiang = getmWZongLiang
            this.getxiaoShouE = getxiaoShouE
            this.getqBuAnZang = getqBuAnZang
            this.getbFenAnFang = getbFenAnFang
            this.getyShouWeiAnZang = getyShouWeiAnZang
            this.getweiShou = getweiShou
            this.updateChart()
          },
    // 首页左上角柱状图
    initChart() {
      this.chart = this.$echarts.init(this.$refs.mapChart);
      let initOption = {
        
       tooltip: { trigger: "item", textStyle: { fontSize: '0.15rem', }},
        legend: { textStyle: { color: "#ffffff" }, show: false },
        
      };

      this.chart.setOption(initOption);
     
    },
    updateChart () {
       let arr=[
          { name: '未销售', value: this.getweiShou },
          { name: '已销售未安葬', value: this.getyShouWeiAnZang },
          { name: '已部分安葬', value: this.getbFenAnFang},
          { name: '已全部安葬', value: this.getqBuAnZang },
      ]
      const dataOption = {
        color: this.color,
        title: [
        {
            text: this.getmWZongLiang,
            x: "center",
            y: "40%",
            textStyle: {
              fontSize: '0.35rem',
              fontWeight: "bolder",
              color: "#1DF9FC",
            },
          },
          {
            text: "墓穴总量",
            x: "center",
            y: "52%",
            textStyle: {
              fontSize: '0.2rem',
              color: "#1DF9FC",
            },
          },
        
        ],
        series: {
          type: 'pie', center: ["50%", "50%"], radius: ["40%", "70%"],
          showEmptyCircle: true,
          // label: { formatter: '{b}: {c}% ', color: '#ffffff' },
          label: { fontSize: '0.2rem',formatter: '{b} ', color: '#ffffff' },
          
          data:arr.map((item,index)=>{
         return {
         label:{
               color:this.color[index],
         },
         ...item
         }
      }),

        }
      }
      this.chart.setOption(dataOption)
    },

    // 屏幕变化
    screenAdapter() {
      this.chart.resize();
    },
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 5.075rem;
  padding: .25rem .125rem 0;
  box-sizing: border-box;
  background: url('../../assets/imgs/box-border.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .top {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top_item{
        width: 1.3rem;
        height: 1.175rem;
        background: url('../../assets/imgs/lititle.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        .font_number{
            font-size: .325rem;
        }
        p{
            margin-top: .125rem;
        }
    }
    .top_item:nth-child(1){
        color: #1DF9FC;
    }
    .top_item:nth-child(2){
        color: #FF9C5D;
    }
    .top_item:nth-child(3){
        color: #3B80FF;
    }
    .top_item:nth-child(4){
        color: #EAAB00;
    }
    .top_item:nth-child(5){
        color: #2FC0FF;
    }
    
  }

  .mapChart {
    //height: 2.6rem;
    flex:1;
  }

  

    
  
}
</style>
